<template>
    <div class="app-container">
      <!-- 头部 -->
      <div class="header">
        <div>菜单管理</div>
        <!-- <el-button type="primary" icon="el-icon-plus" @click="openAddDialog" size="mini">新增菜单</el-button> -->
      </div>
      
      <!-- 搜索区域 -->
      <!-- <div class="search-bar">
        <el-input
          placeholder="请输入菜单名称或URL"
          v-model="searchKeyword"
          @keyup.enter.native="filterMenus"
          clearable
          @clear="filterMenus"
        >
          <el-button slot="append" icon="el-icon-search" @click="filterMenus"></el-button>
        </el-input>
      </div> -->
      
      <!-- 菜单表格 -->
      <el-table
        v-loading="loading"
        :data="filteredMenus"
        style="width: 100%"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        :default-expand-all="false"
        :row-class-name="tableRowClassName"
        @row-click="handleRowClick"
        ref="menuTable"
      >
        <el-table-column prop="menuName" label="菜单名称">
          <template slot-scope="scope">
            <div class="menu-name-cell">
              <!-- <i :class="scope.row.icon" class="menu-icon"></i> -->
              <span>{{ scope.row.menuName }}</span>
              <el-tag v-if="scope.row.parentId === 0" size="mini" type="primary" style="margin-left: 10px;">根菜单</el-tag>
            </div>
          </template>
        </el-table-column>
        
        <!-- <el-table-column prop="menuUrl" label="URL" width="100">
          <template slot-scope="scope">
            <a v-if="scope.row.menuUrl" :href="scope.row.menuUrl" target="_blank" class="menu-url">
              {{ scope.row.menuUrl }}
            </a>
            <span v-else>-</span>
          </template>
        </el-table-column>
         -->
        <el-table-column prop="sortOrder" label="排序" width="100" align="center">
          <template slot-scope="scope">
            <span class="sort-badge">{{ scope.row.sortOrder }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="project" label="关联项目" min-width="300">
          <template slot-scope="scope">
            <div v-if="scope.row.project && scope.row.project.length > 0" class="project-tags">
              <el-tag v-for="proj in scope.row.project" :key="proj.id" size="small" type="primary">
                {{ proj.projectName }}
              </el-tag>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="createdAt" label="创建时间" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i> {{ formatDate(scope.row.createdAt) }}
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="operation-cell">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="openEditDialog(scope.row)" v-if="scope.row.parentId!=0">编辑</el-button>
              <!-- <el-button type="danger" size="mini" icon="el-icon-delete" @click="confirmDelete(scope.row)">删除</el-button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 无数据提示 -->
      <div v-if="filteredMenus.length === 0 && !loading" class="no-data">
        <i class="fas fa-inbox"></i>
        <p>没有找到匹配的菜单</p>
      </div>
      
      <!-- 新增/编辑对话框 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
          <!-- <div class="form-section">
            <div class="form-section-title">
              <i class="fas fa-info-circle"></i> 菜单基本信息
            </div>
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="form.menuName" placeholder="请输入菜单名称"></el-input>
            </el-form-item>
            
            <el-form-item label="菜单URL" prop="menuUrl">
              <el-input v-model="form.menuUrl" placeholder="请输入菜单URL"></el-input>
            </el-form-item>
            
            <el-form-item label="菜单图标" prop="icon">
              <div class="icon-selector">
                <div class="icon-preview">
                  <i :class="form.icon"></i>
                </div>
                <el-select v-model="form.icon" placeholder="请选择菜单图标" style="flex: 1">
                  <el-option v-for="icon in menuIcons" :key="icon" :value="icon" :label="icon">
                    <span style="float: left; margin-right: 10px">
                      <i :class="icon"></i>
                    </span>
                    <span>{{ icon }}</span>
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
            
            <el-form-item label="排序序号" prop="sortOrder">
              <el-input-number v-model="form.sortOrder" :min="0" :max="1000"></el-input-number>
            </el-form-item>
            
            <el-form-item label="父级菜单" prop="parentId">
              <el-select v-model="form.parentId" placeholder="请选择父级菜单" style="width: 100%">
                <el-option label="无父级菜单 (根菜单)" :value="0"></el-option>
                <el-option 
                  v-for="menu in rootMenus" 
                  :key="menu.id" 
                  :label="menu.menuName" 
                  :value="menu.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div> -->
          
          <div class="form-section" >
            <div class="form-section-title">
              <i class="fas fa-project-diagram"></i> 关联项目
            </div>
            <div class="project-tree">
              <el-tree
                ref="projectTree"
                :data="allProjects"
                show-checkbox
                node-key="id"
                :props="projectTreeProps"
                :default-expand-all="true"
                :check-strictly="true"
                :default-checked-keys="form.projectIds"
              ></el-tree>
            </div>
          </div>
        </el-form>
        
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </el-dialog>
    
  </div>
</template>
<script>




export default {
  name: 'Program',  
  components: { },
  props: {

  },
  data(){
    return{
      loading: false,
          searchKeyword: '',
          menus: [],
          filteredMenus: [],
          dialogVisible: false,
          dialogTitle: '新增菜单',
          form: {
            id: null,
            menuName: '',
            menuUrl: '',
            icon: 'el-icon-menu',
            sortOrder: 0,
            parentId: 0,
            projectIds: []
          },
          rules: {
            menuName: [
              { required: true, message: '请输入菜单名称', trigger: 'blur' },
              { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
            ],
            menuUrl: [
              { max: 200, message: 'URL不能超过200个字符', trigger: 'blur' }
            ],
            icon: [
              { required: true, message: '请选择菜单图标', trigger: 'change' }
            ],
            sortOrder: [
              { required: true, message: '请设置排序序号', trigger: 'blur' }
            ]
          },
          menuIcons: [
            'el-icon-menu', 'el-icon-s-home', 'el-icon-s-data', 'el-icon-s-claim', 
            'el-icon-s-order', 'el-icon-s-custom', 'el-icon-s-platform', 'el-icon-s-marketing',
            'el-icon-setting', 'el-icon-user', 'el-icon-folder', 'el-icon-document',
            'el-icon-monitor', 'el-icon-s-tools', 'el-icon-s-cooperation', 'el-icon-s-opportunity',
            'fas fa-home', 'fas fa-users', 'fas fa-chart-bar', 'fas fa-cog',
            'fas fa-file-alt', 'fas fa-database', 'fas fa-shopping-cart', 'fas fa-tachometer-alt'
          ],
          allProjects: [],
          projectTreeProps: {
            label: 'projectName',
            children: 'children'
          }
    }
  },
  computed: {
    rootMenus() {
          return this.menus.filter(m => m.parentId === 0 && m.id!=this.form.id);
        }
  },
  methods: {
    getProject(){
      this.$axios.get('/api/services/hzsfjtai/project/treeList', {}).then(res => {
            if (res.data.code === 200) {
              this.allProjects =res.data.data.map(item => ({
                ...item,
                parentId: item.value == null ? 0 : item.value
              }));
              console.log(89,this.allProjects);
            } else {
              this.$message(res.data.msg)
            }
          }).catch(err => {
            this.$message.error(err)
          })
    },
  // 处理行点击事件
      handleRowClick(row, column, event) {
        // 检查点击是否在操作按钮上（避免与操作按钮冲突）
        if (event.target.closest('.operation-cell')) {
          return;
        }
        
        // 如果该行有子节点，则切换展开状态
        if (row.children && row.children.length > 0) {
          this.toggleRowExpansion(row);
        }
      },
      
      // 切换行展开状态
      toggleRowExpansion(row) {
        const table = this.$refs.menuTable;
        table.toggleRowExpansion(row);
      },
        // 获取数据
        fetchData() {
          this.loading = true;
          this.$axios.get('/api/services/hzsfjtai/menu/treeList', {}).then(res => {
            if (res.data.code === 200) {
              this.menus =res.data.data.map(item => ({
                ...item,
                parentId: item.value == null ? 0 : item.value
              }));
               // 为每个节点添加层级信息
              this.addLevelInfo(this.menus, 0);
              
              this.filteredMenus = [...this.menus];
              this.loading = false;
            } else {
              this.$message(res.data.msg)
            }
          }).catch(err => {
            this.$message.error(err)
          })
        },
        
        // 为行添加类名，用于层级样式
        tableRowClassName({ row }) {
          if (row.level === undefined) return '';
          return `level-${row.level}`;
        },
        
        // 递归添加层级信息
        addLevelInfo(nodes, level) {
          nodes.forEach(node => {
            node.level = level;
            if (node.children && node.children.length) {
              this.addLevelInfo(node.children, level + 1);
            }
          });
        },
        
        // 打开新增对话框
        openAddDialog() {
          this.dialogTitle = '新增菜单';
          this.form = {
            id: null,
            menuName: '',
            menuUrl: '',
            icon: 'el-icon-menu',
            sortOrder: 0,
            parentId: 0,
            projectIds: []
          };
          this.dialogVisible = true;
          this.$nextTick(() => {
            if (this.$refs.projectTree) {
              this.$refs.projectTree.setCheckedKeys([]);
            }
            if (this.$refs.form) {
              this.$refs.form.clearValidate();
            }
          });
        },
        
        // 打开编辑对话框
        openEditDialog(menu) {
          console.log(999,menu);
          this.dialogTitle = '编辑菜单';
          this.form = {
            id: menu.id,
            menuName: menu.menuName,
            menuUrl: menu.menuUrl,
            icon: menu.icon,
            sortOrder: menu.sortOrder,
            parentId: menu.parentId,
            projectIds: menu.project.map(pro => pro.id) || []
          };
          this.dialogVisible = true;
          this.$nextTick(() => {
            if (this.$refs.projectTree) {
              this.$refs.projectTree.setCheckedKeys(menu.project.map(pro => pro.id) || []);
            }
            if (this.$refs.form) {
              this.$refs.form.clearValidate();
            }
          });
        },
        
        // 提交表单
        submitForm() {
          this.$refs.form.validate(valid => {
            if (valid) {
              // 获取选中的项目ID
              const checkedKeys = this.$refs.projectTree.getCheckedKeys();
              const halfCheckedKeys = this.$refs.projectTree.getHalfCheckedKeys();
              const projectIds = [...checkedKeys, ...halfCheckedKeys];
              
              // 添加到表单数据
              this.form.projectIds = projectIds;
              
              if (this.form.id) {
                // 更新菜单
                this.updateMenu();
              } else {
                // 新增菜单
                this.addMenu();
              }
              this.dialogVisible = false;
            }
          });
        },
        
        // 新增菜单
        addMenu() {
          const newMenu = {
            menuName: this.form.menuName,
            menuUrl: this.form.menuUrl,
            icon: this.form.icon,
            sortOrder: this.form.sortOrder,
            parentId: this.form.parentId,
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString(),
            projectIds: this.form.projectIds,
            project: this.getProjectsByIds(this.form.projectIds),
            children: [],
            level: this.form.parentId === 0 ? 0 : (this.getParentLevel(this.form.parentId) + 1)
          };
          this.$axios.post('/api/services/hzsfjtai/menu/add', {
            menuName: this.form.menuName,
            menuUrl: this.form.menuUrl,
            icon: this.form.icon,
            sortOrder: this.form.sortOrder,
            parentId: this.form.parentId === 0 ? null : this.form.parentId,
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString(),
            project: this.getProjectsByIds(this.form.projectIds),
            children: [],
          }).then(res => {
            if (res.data.code === 200) {
               this.fetchData();
              this.$message({
                type: 'success',
                message: '菜单添加成功!'
              });
            } else {
              this.$message(res.data.msg)
            }
          }).catch(err => {
            this.$message.error(err)
          })
        }, 
        
        // 获取父级层级
        getParentLevel(parentId) {
          const parent = this.findMenuById(this.menus, parentId);
          return parent ? parent.level : 0;
        },
        
        // 递归查找菜单
        findMenuById(menus, id) {
          for (const menu of menus) {
            if (menu.id === id) {
              return menu;
            }
            
            if (menu.children && menu.children.length > 0) {
              const found = this.findMenuById(menu.children, id);
              if (found) return found;
            }
          }
          return null;
        },
        
        // 递归添加子菜单
        addChildMenu(menus, parentId, newMenu) {
          for (const menu of menus) {
            if (menu.id === parentId) {
              if (!menu.children) {
                menu.children = [];
              }
              menu.children.push(newMenu);
              return true;
            }
            
            if (menu.children && menu.children.length > 0) {
              if (this.addChildMenu(menu.children, parentId, newMenu)) {
                return true;
              }
            }
          }
          return false;
        },
        
        // 更新菜单
        updateMenu() {
          // // 在实际应用中，这里应该调用API更新菜单
          // this.updateMenuInTree(this.menus, this.form);
          // // 重新添加层级信息
          // this.addLevelInfo(this.menus, 0);
          // this.filteredMenus = [...this.menus];
          this.$axios.post('/api/services/hzsfjtai/menu/update', {
            id:this.form.id,
            menuName: this.form.menuName,
            menuUrl: this.form.menuUrl,
            icon: this.form.icon,
            sortOrder: this.form.sortOrder,
            parentId: this.form.parentId === 0 ? null : this.form.parentId,
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString(),
            project: this.getProjectsByIds(this.form.projectIds),
            children: [],
          }).then(res => {
            if (res.data.code === 200) {
               this.fetchData();
              this.$message({
                type: 'success',
                message: '菜单更新成功!'
              });
            } else {
              this.$message(res.data.msg)
            }
          }).catch(err => {
            this.$message.error(err)
          })
        },
        
        // 递归更新菜单
        updateMenuInTree(menus, updatedMenu) {
          for (let i = 0; i < menus.length; i++) {
            if (menus[i].id === updatedMenu.id) {
              menus[i] = {
                ...menus[i],
                menuName: updatedMenu.menuName,
                menuUrl: updatedMenu.menuUrl,
                icon: updatedMenu.icon,
                sortOrder: updatedMenu.sortOrder,
                parentId: updatedMenu.parentId,
                updatedAt: new Date().toISOString(),
                projectIds: updatedMenu.projectIds,
                project: this.getProjectsByIds(updatedMenu.projectIds)
              };
              return true;
            }
            
            if (menus[i].children && menus[i].children.length > 0) {
              if (this.updateMenuInTree(menus[i].children, updatedMenu)) {
                return true;
              }
            }
          }
          return false;
        },
        
        // 根据ID获取项目信息
        getProjectsByIds(ids) {
          const projects = [];
          this.traverseProjects(this.allProjects, node => {
            if (ids.includes(node.id)) {
              projects.push({
                id: node.id,
                projectName: node.projectName,
                description: node.description || '',
                parentId: node.parentId
              });
            }
          });
          return projects;
        },
        
        // 遍历项目树
        traverseProjects(nodes, callback) {
          nodes.forEach(node => {
            callback(node);
            if (node.children && node.children.length) {
              this.traverseProjects(node.children, callback);
            }
          });
        },
        
        // 确认删除
        confirmDelete(menu) {
          this.$confirm(`确定删除菜单 "${menu.menuName}" 及其所有子菜单吗?`, '删除确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteMenu(menu.id);
          }).catch(() => {});
        },
        
        // 删除菜单
        deleteMenu(id) {
          this.$axios.post('/api/services/hzsfjtai/menu/delete', {
              id:id
            }).then(res => {
              if (res.data.code === 200) {
                   this.fetchData();
                   this.$message({
                      type: 'success',
                      message: '菜单删除成功!'
                    });
              } else {
                this.$message(res.data.msg)
              }
            }).catch(err => {
              this.$message.error(err)
            })
        },
        
        // 递归删除菜单
        removeMenuFromTree(menus, id) {
          for (let i = 0; i < menus.length; i++) {
            if (menus[i].id === id) {
              menus.splice(i, 1);
              return true;
            }
            
            if (menus[i].children && menus[i].children.length > 0) {
              if (this.removeMenuFromTree(menus[i].children, id)) {
                return true;
              }
            }
          }
          return false;
        },
        
        // 过滤菜单
        filterMenus() {
          if (!this.searchKeyword) {
            this.filteredMenus = [...this.menus];
            return;
          }
          
          const keyword = this.searchKeyword.toLowerCase();
          this.filteredMenus = this.deepFilterMenus(this.menus, keyword);
        },
        
        // 深度过滤菜单
        deepFilterMenus(menus, keyword) {
          return menus.filter(menu => {
            // 检查当前菜单是否匹配
            const match = menu.menuName.toLowerCase().includes(keyword) || 
                          (menu.menuUrl && menu.menuUrl.toLowerCase().includes(keyword));
            
            // 递归过滤子菜单
            if (menu.children && menu.children.length > 0) {
              const filteredChildren = this.deepFilterMenus(menu.children, keyword);
              if (filteredChildren.length > 0) {
                // 如果子菜单匹配，则保留当前菜单及其匹配的子菜单
                menu.children = filteredChildren;
                return true;
              }
            }
            
            // 如果当前菜单匹配，则保留
            return match;
          });
        },
        
        // 格式化日期
        formatDate(isoString) {
          const date = new Date(isoString);
          return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
        },
        
        // 生成唯一ID
        generateId() {
          return Math.max(0, ...this.getAllIds(this.menus)) + 1;
        },
        
        // 获取所有菜单ID
        getAllIds(menus) {
          let ids = [];
          menus.forEach(menu => {
            ids.push(menu.id);
            if (menu.children && menu.children.length > 0) {
              ids = ids.concat(this.getAllIds(menu.children));
            }
          });
          return ids;
        }
      },
  mounted() {
    this.fetchData();
    this.getProject();
  }
}
</script>
<style scoped lang="less" >
.el-table__row {
  cursor: pointer;
  transition: background-color 0.3s;
}

.el-table__row:hover {
  background-color: #f0f7ff !important;
}

.el-table__row--expanded {
  background-color: #f5f7fa;
}
.app-container {
      margin: 0 auto;
      padding: 20px;
    }
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #ebeef5;
    }
    
    .header h1 {
      color: #303133;
      font-weight: 600;
      font-size: 24px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .header h1 i {
      color: #409EFF;
    }
    
    .search-bar {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .search-bar .el-input {
      flex: 1;
    }
    
    .el-table {
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    
    .el-table .el-table__row:hover {
      background-color: #f5f7fa !important;
    }
    
    .operation-cell {
      display: flex;
      gap: 8px;
    }
    
    .el-button--primary {
      background-color: #409EFF;
      border-color: #409EFF;
    }
    
    .el-button--primary:hover {
      background-color: #66b1ff;
      border-color: #66b1ff;
    }
    
    .el-button--primary:active {
      background-color: #3a8ee6;
      border-color: #3a8ee6;
    }
    
    .el-tag {
      border-radius: 12px;
      padding: 0 12px;
      height: 28px;
      line-height: 28px;
      margin-right: 6px;
      margin-bottom: 4px;
    }
    
    .el-tag--primary {
      background-color: #ecf5ff;
      border-color: #d9ecff;
      color: #409EFF;
    }
    
    .el-tag--success {
      background-color: #f0f9eb;
      border-color: #e1f3d8;
      color: #67c23a;
    }
    
    .no-data {
      text-align: center;
      padding: 40px 0;
      color: #909399;
    }
    
    .no-data i {
      font-size: 60px;
      color: #dcdfe6;
      margin-bottom: 15px;
    }
    
    .no-data p {
      font-size: 16px;
    }
    
    .el-dialog__header {
      border-bottom: 1px solid #ebeef5;
      padding: 15px 20px;
    }
    
    .el-dialog__title {
      color: #303133;
      font-weight: 600;
      font-size: 18px;
    }
    
    .el-dialog__body {
      padding: 20px;
      max-height: 70vh;
      overflow-y: auto;
    }
    
    .footer {
      text-align: center;
      padding: 20px 0;
      color: #909399;
      font-size: 14px;
    }
    
    .footer a {
      color: #409EFF;
      text-decoration: none;
    }
    
    .footer a:hover {
      text-decoration: underline;
    }
    
    /* 树形表格样式优化 */
    .el-table .el-table__row .el-table__expand-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      position: relative;
      top: 0;
    }
    
    .el-table .el-table__row .el-table__expand-icon .el-icon {
      margin-top: -2px;
    }
    
    .el-table .cell {
      display: flex;
      align-items: center;
      height: 100%;
    }
    
    /* 层级缩进样式 */
    .menu-name-cell {
      display: flex;
      align-items: center;
      height: 100%;
      padding-left: 10px;
    }
    
    .level-indent {
      display: inline-block;
      width: 24px;
      height: 100%;
    }
    
    .level-1 .menu-name-cell {
      padding-left: 34px;
    }
    
    .level-2 .menu-name-cell {
      padding-left: 58px;
    }
    
    .level-3 .menu-name-cell {
      padding-left: 82px;
    }
    
    .level-0 .el-table__expand-icon {
      color: #409EFF;
    }
    
    .level-1 .el-table__expand-icon {
      color: #67C23A;
    }
    
    .level-2 .el-table__expand-icon {
      color: #E6A23C;
    }
    
    .level-3 .el-table__expand-icon {
      color: #F56C6C;
    }
    
    .el-table__expand-icon--expanded {
      transform: rotate(0);
    }
    
    .el-table__expand-icon .el-icon-arrow-right:before {
      content: "\e6d9";
    }
    
    .el-table__expand-icon--expanded .el-icon-arrow-right:before {
      content: "\e6d8";
    }
    
    /* 表单样式 */
    .form-section {
      margin-bottom: 20px;
      padding: 15px;
      border-radius: 8px;
      background: #f9fbfd;
      border: 1px solid #ebeef5;
    }
    
    .form-section-title {
      font-size: 16px;
      font-weight: 600;
      color: #409EFF;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .project-tree {
      max-height: 300px;
      overflow-y: auto;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      padding: 10px;
    }
    
    .project-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    
    .icon-selector {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .icon-preview {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ecf5ff;
      border-radius: 4px;
      color: #409EFF;
      font-size: 18px;
    }
    
    .menu-icon {
      margin-right: 8px;
      font-size: 18px;
      color: #5a5e66;
    }
    
    .menu-url {
      color: #409EFF;
      text-decoration: none;
    }
    
    .menu-url:hover {
      text-decoration: underline;
    }
    
    .sort-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      background: #409EFF;
      color: white;
      border-radius: 50%;
      font-size: 12px;
    }
</style>

